<script setup lang='ts'>
import { useVModel } from '@vueuse/core'
//接受props
let props = defineProps(["modelValue",'namedText']);
//let $emit = defineEmits(['update:modelValue','update:namedText']);
let $emit = defineEmits();//省略 ['update:modelValue'] 也可以

const synTextRef = useVModel(props, 'modelValue', $emit )
const synTextNamedRef = useVModel(props, 'namedText', $emit )
const updateChild=(event)=>{
    synTextRef.value=event.target.value
}

const updateChildNamed=(event)=>{
    synTextNamedRef.value=event.target.value
}

</script>
<template>
    <div>
        <b>modelValue: </b>
        <input 
            type="text" 
            :value="modelValue"
            @input="updateChild"
        />
        <b>namedText: </b>
        <input 
            type="text" 
            :value="namedText"
            @input="updateChildNamed"
        />

    </div>
</template>
<style lang='scss' scoped>
    
</style>